Timeline.Actions: wrap below Body on narrow viewports#8169
Conversation
Add three dev stories under Components/Timeline/Dev/Actions Responsive that explore layout options for Timeline.Actions when the surrounding Timeline.Item is below 480px inline size, tracked in github/primer#6693: 1. Wrap below Body — Item switches to a 2-column grid so Actions land in the same column as Body, left-aligned with the body text. 2. Stack vertically — Actions become a right-aligned column with an enforced 8px gap from Body. 3. Baseline — current inline behavior, kept for side-by-side comparison. Each story uses a container-query-driven layout inside a resizable wrapper so Storybook viewport controls (or the drag handle) can drive the transition. No production Timeline code is touched.
🦋 Changeset detectedLatest commit: ee9b894 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
The initial commit used *.dev.stories.* which is excluded from the deployed Storybook build (packages/react/.storybook/main.ts). Rename to *.features.stories.* and move the story title from 'Components/Timeline/Dev/Actions Responsive' to 'Components/Timeline/Features/Actions Responsive' so reviewers can open the three prototypes on the PR preview URL.
Adds two cases to the shared ItemCases block so each responsive option also demonstrates layouts where Timeline.Actions holds a verification cluster (Label + icon + SHA link) rather than buttons \u2014 the pattern used on PR commit-added events (github/primer#6693). E. Long commit subject (\u201cApply suggestions from code review\u201d) + Verified label + check icon + SHA. F. Same shape with a \u201cPartially verified\u201d label + X icon + SHA to stress the SHA cluster with a wider Actions slot. Adds .SignatureLabelPartial and .IconDanger helper classes for the partially-verified variant styling.
Adds Case G to ItemCases so each responsive option also demonstrates the third Timeline.Actions pattern Jan called out alongside Buttons and SHA clusters (github/primer#6693): an optional octicon (LockIcon for private references) paired with a StateLabel showing the referenced PR's state. Mirrors the GitHub PR cross-reference row ("mentioned this pull request in <PR title> #NNNN") with LockIcon + StateLabel status=pullOpened as Actions content. Confirms the grid switch in Option 1 also aligns the StateLabel cluster under the reference text at narrow widths.
liuliu-dev
added
the
Canary Release
|
github-actions
Bot
added
the
integration-tests: recommended
janmaarten-a11y
left a comment
janmaarten-a11y
left a comment
There was a problem hiding this comment.
Looks great to me. ❤️
I double-checked my recent github-ui PRs that aim to add proper list semantics to events and found no major conflicts.
- https://github.com/github/github-ui/pull/22083
- https://github.com/github/github-ui/pull/26232
- https://github.com/github/github-ui/pull/26229
The one possible interaction to watch is is that #26232's .Timeline_Item_withDivider explicitly relies on Timeline.Item being a flex row it can wrap so the full-width divider spans correctly (its own comment says so). If a divider row ever renders inside a Timeline narrower than 480px with the semantics flag on, #8169's grid could override that flex assumption and the divider could reflow. It only bites at <480px container width with both changes active and the flag on, so production (flag off) is unaffected.
Not something to worry about in this PR, I think. Once this one lands, I'll check to see if any updates are needed to that one.
liuliu-dev
changed the title
|
Integration test results from github/github-ui PR:
VRT check ensures that when visual differences are detected, the PR cannot proceed until someone acknowledges the changes by adding the "visual difference acknowledged" label. Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance. |
liuliu-dev
added
Canary Release
Closes github/primer#6693
When
Timeline.Itemis below 480px inline size, it now switches to a two-row grid soTimeline.Actionswraps onto its own line underTimeline.Body, left-aligned with the body content. Above 480px is unchanged.Uses a container query on
.Timeline, so the wrap responds to the timeline's own width — narrow side panels and split views work correctly without depending on viewport size.Changelog
New
Timeline.Actions(< 480px).WithActionsstory: commit-SHA rows hide theVerified/Unverifiedlabel at narrow widths, and the cross-reference cardstacks vertically.
Rollout strategy
Testing & Reviewing